<template>
  <view class="address-list-container">
    <!-- 地址列表 -->
    <scroll-view class="address-scroll" scroll-y>
      <view class="address-list">
        <address-item 
          v-for="address in addressList" 
          :key="address.id"
          :address="address"
          :select-mode="selectMode"
          @edit="editAddress(address)"
          @delete="confirmDelete(address.id)"
          @select="selectAddress(address)"
        />
      </view>
      
      <!-- 空状态 -->
      <view class="empty-address" v-if="addressList.length === 0 && !loading">
        <image src="/static/empty-address.png" mode="aspectFit"></image>
        <text>暂无收货地址</text>
      </view>
    </scroll-view>
    
    <!-- 添加按钮 -->
    <view class="add-btn">
      <button @click="addAddress">添加新地址</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad,onShow } from '@dcloudio/uni-app'
import { getAddressList, deleteAddress } from '@/api/address'
import AddressItem from './components/AddressItem.vue'

const addressList = ref([])
const loading = ref(false)
const selectMode = ref(false)

// 加载地址列表
const loadAddressList = async () => {
  try {
    loading.value = true
    const res = await getAddressList()
    addressList.value = res.data || []
  } catch (e) {
    uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

// 添加地址
const addAddress = () => {
  uni.navigateTo({
    url: '/pages/address/edit'
  })
}

// 编辑地址
const editAddress = (address) => {
  uni.navigateTo({
    url: `/pages/address/edit?id=${address.id}`
  })
}

// 确认删除
const confirmDelete = (id) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除该地址吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          await deleteAddress(id)
          uni.showToast({ title: '删除成功', icon: 'success' })
          loadAddressList()
        } catch (e) {
          uni.showToast({ title: '删除失败', icon: 'none' })
        }
      }
    }
  })
}

// 选择地址（选择模式下）
const selectAddress = (address) => {
  if (selectMode.value) {
    const pages = getCurrentPages()
    const prevPage = pages[pages.length - 2]
    if (prevPage && prevPage.$vm) {
      prevPage.$vm.setSelectedAddress(address)
    }
    uni.navigateBack()
  }
}

// 初始化
onLoad((options) => {
  if (options.selectMode) {
    selectMode.value = true
    uni.setNavigationBarTitle({ title: '选择收货地址' })
  }
})

// 页面显示时刷新数据
onShow(() => {
  loadAddressList()
})
</script>

<style lang="scss">
.address-list-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  
  .address-scroll {
    flex: 1;
    padding-bottom: 100rpx;
    
    .empty-address {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 100rpx;
      
      image {
        width: 300rpx;
        height: 300rpx;
        margin-bottom: 30rpx;
      }
      
      text {
        font-size: $font-size-28rpx;
        color: #999;
      }
    }
  }
  
  .add-btn {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    padding: 10rpx 30rpx;
    background-color: $white-bg;;
    border-top: 1rpx solid #f5f5f5;
    
    button {
      height: 80rpx;
      line-height: 80rpx;
      background-color: $primary-color;
      color: $text-color-inverse;
      font-size: $font-size-30rpx;
      border-radius: 40rpx;
      
      &::after {
        border: none;
      }
    }
  }
}
</style>